<template>
  <div class="Line" id="lineRef"></div>
</template>
<script setup>
  import * as echarts from "echarts";
  const props = defineProps({
    xAxis:{
      type:Array,
      default:() => []
    },
    yData:{
      type:Array,
      default:() => {
        return [
          {
            name:"Speed1",
            yAxisIndex:0,
            data:[1,2,5,6]
          }
        ]
      }
    }
  })

  watch(() => props.yData, () => {
    nextTick(()=>{
      initChart();
    })
  }, {
    deep:true
  });
  onMounted(() => {
    // initChart();
  });

  // 生成随机颜色
  function getRandomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    
    return "rgb(" + r + "," + g + "," + b + ")";
  }
  function initChart() {
    const lineRef = echarts.init(document.getElementById('lineRef'));
    lineRef.clear();
    let series = [], yAxis = [], legendData = [];
    for (let i = 0; i < props.yData.length; i++) {
      const item = props.yData[i];
      const color = getRandomColor();
      legendData.push(item.name);
      yAxis.push({
        type: 'value',
        name:item.name,
        axisLine:{
          show:true,
        },
        offset:i <= 1 ? 0 : Math.floor((i) / 2) * 50,
        splitLine:{
          show:false
        },
        nameRotate: '90',
        nameLocation:"center",
        nameTextStyle:{
          padding: [15,0,10,0]
        },
        position: i % 2 === 0 ? 'left' : 'right',
      })
      series.push({
        type: 'line',
        name:item.name,
        data: item.data,
        yAxisIndex:item.yAxisIndex,
        lineStyle:{
          color
        },
        // showSymbol: false,
        symbol: "none",
        color
      });
    }
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          let relVal = "转速(r/min) " + params[0].name;
          params.forEach((item,i) => {
            const value = typeof item.value === 'number' || typeof item.value === 'string' ? item.value : item.value[1];
            relVal += `<div style="display:flex;align-items:center;line-height:35px;"></br> ${item.marker} <div style="width:120px;text-align:right;margin-right:15px;">${item.data.label}</div>  ${value} </div>`
          });
          return relVal
        }
      },
      toolbox: {
        feature: {
          magicType: { show: true, type: ['line', 'bar'] },
          saveAsImage: { show: true }
        }
      },
      dataZoom:[
        {
          type: 'slider',
          realtime: true,
          start: 0,
          end: 60,  // 初始展示40%
          height: 30,
          fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
          borderColor: "rgba(17, 100, 210, 0.12)", 
          handleSize:30, // 两边手柄尺寸
          showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          top:'92%',
        },
      ],
      grid:{
        top:80,
        left:280,
        right:280,
        bottom:90
      },
      legend: {
        show:true,
        data: legendData
      },
      xAxis: {
        type: 'category',
        data: props.xAxis,
        boundaryGap: false,
        name:"转速(r/min)",
        nameLocation:"center",
        nameTextStyle:{
          padding: [20,0,10,0]
        },
      },
      yAxis: yAxis,
      series:series
    };
    lineRef.setOption(option);
  }
</script>
<style scoped>
/* @import url(); 引入css类 */
.Line{
  width: 100%;
  height: 550px;
}
</style>
